<!--
 * @Author: zhangyang
 * @Date: 2023-12-27 15:36:02
 * @LastEditTime: 2024-01-12 17:04:35
 * @Description:
-->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { fillSlash } from '../utils'

defineProps<{
  title: string
  navbar: NavbarItem[]
}>()

const showMenu = ref(false)
const currentPath = ref('')

function handleClick() {
  showMenu.value = !showMenu.value
}

onMounted(() => {
  currentPath.value = location.pathname
})
</script>

<template>
  <div class="xl:hidden relative">
    <div class="i-ic:outline-menu cursor-pointer text-30px font-700 m-20px xl:ml-20" @click="handleClick" />
    <div v-show="showMenu" class="h-100vh flex w-full fixed left-0 top-0 z-1">
      <div class="w-250px bg-white h-full">
        <div>
          <div class="bg-blue p-10px text-20px text-white font-600 flex justify-between">
            <div>
              {{ title }}
            </div>
            <button id="button" class="font-400 cursor-pointer" @click="handleClick">
              ×
            </button>
          </div>
        </div>
        <div class="flex flex-col">
          <a
            v-for="(item, index) in navbar" :key="`${index}sj`" class="text-15px text-[#333] b-b-1 b-dashed b-blue-100"
            :class="[currentPath === `${item.path}/${item.id}/index.html` || currentPath === fillSlash(item.path) ? `text-blue` : ``]"
            :href="fillSlash(item.path === '/addtemp' ? `${item.path}/${item.id}` : item.path)"
          >
            <div class="p-10px">{{ item.name }}</div>
          </a>
        </div>
      </div>
      <div class="w-[calc(100%-200px)] bg-black opacity-30%" @click="handleClick" />
    </div>
  </div>
</template>
